<template>
  <div class="app-container">
    <el-input class="marginRB10" v-model="listQuery.search" placeholder="用户ID|公会名称" style="width:200px;" clearable></el-input>
    <el-button type="primary" @click="getList" icon="el-icon-search"   class="marginRB10">搜索</el-button>

    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="sociaty_id" label="公会编号" > </el-table-column>
      <el-table-column prop="user_id" label="会长编号" > </el-table-column>
      <el-table-column prop="sociaty_name" label="公会名称" > </el-table-column>
      <el-table-column prop="room_rate" label="房间流水收益比例" > </el-table-column>
      <el-table-column prop="user_rate" label="成员流水收益比例" > </el-table-column>
      <el-table-column prop="memo" label="备注" > </el-table-column>

      <el-table-column min-width="180" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>
          <el-button type="primary" size="mini" @click="handleUpdate2(scope.row)" plain>备注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage" @pagination="getList"/>

    <el-dialog @close="handleDialogClose('dataForm')" v-dialogDrag title="编辑" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="140px" style="width: 400px; margin: 0 auto;">
        <el-form-item label="公会编号">
          {{form.sociaty_id}}
        </el-form-item>
        <el-form-item label="会长编号">
          {{form.user_id}}
        </el-form-item>
        <el-form-item label="公会名称">
          {{form.sociaty_name}}
        </el-form-item>
        <el-form-item label="房间流水收益比例" prop="room_rate">
          <el-input v-model="form.room_rate" placeholder="请输入房间流水收益比例"/>
        </el-form-item>
        <el-form-item label="成员流水收益比例" prop="user_rate">
          <el-input v-model="form.user_rate" placeholder="请输入成员流水收益比例"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog @close="handleDialogClose('dataForm2')" v-dialogDrag title="编辑备注" :visible.sync="dialogFormVisible2">
      <el-form ref="dataForm2" :rules="rules2" :model="form2" label-position="right" label-width="140px" style="width: 400px; margin: 0 auto;">
        <el-form-item label="备注">
          <el-input v-model="form2.memo" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible2 = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm2()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { saveData, deleteData,  updateData, listData } from '@/api/unionWater/unionListWater'
  export default {
    data() {
      return {
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        menuList: [],
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          sociaty_id: undefined,
          name: undefined,
        },
        form2: {
          sociaty_id: undefined,
          memo: undefined,
        },
        rules: {
          room_rate: [{ required: true, message: '请输入', trigger: 'blur' }],
          user_rate: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        rules2: {
          memo: [{ required: true, message: '请输入', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 监听dialog关闭时的处理事件
      handleDialogClose(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].clearValidate(); // 清除整个表单的校验
        }
      },
      getList() {
        this.listLoading = true
        let urlData = '?';
        if(this.listQuery.page){ urlData = urlData + `page=${this.listQuery.page}&`}
        if(this.listQuery.perPage){ urlData = urlData + `perPage=${this.listQuery.perPage}`}
        if(this.listQuery.search){ urlData = urlData + `&search=${this.listQuery.search}`}

        listData(urlData).then(response => {
          this.menuList = response.data.list
          this.total = response.data.meta.total;
          this.listLoading = false
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        this.form.sociaty_id= row.sociaty_id
        this.form.user_id= row.user_id
        this.form.sociaty_name= row.sociaty_name
        this.form.room_rate= row.room_rate
        this.form.user_rate= row.user_rate

        this.dialogFormVisible = true

        this.form = Object.assign({}, this.form)
      },
      handleUpdate2(row) {
        this.form2 = []
        this.form2.sociaty_id= row.sociaty_id
        this.form2.memo= row.memo

        this.dialogFormVisible2 = true

        this.form2 = Object.assign({}, this.form2)
      },
      handleDelete(row) {
        let data = {ids:row.id}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      allDel(){
        let delNum = []
        this.$refs.dataList.selection.forEach((k) => { delNum.push(k.id) })
        if(delNum.length === 0){return;}
        let data = {ids:delNum.toString()}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      submitForm() {
        this.$refs['dataForm'].validate(valid => {
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            saveData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
        })
      },
      submitForm2() {
        this.$refs['dataForm2'].validate(valid => {
            let formData = new FormData();
            for(let item in this.form2){this.form2[item] === undefined? '':formData.append(item, this.form2[item]);}
          updateData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible2 = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
        })
      },
      resetForm() {
        this.form = {
          id: undefined,
          name: undefined,
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
